<template>
	<view class="class-room">
		<u-loading-page :loading="is_wifi_connecting" loading-text="wifi连接中..."></u-loading-page>
		<view class="class-room-img">
			<image :src="roomDetails.room_bannerimage" mode=""></image>
		</view>
		<view class="class-room-shop">
			<view class="class-room-shop-tit">
				{{roomDetails.store_name}}-{{roomDetails.room_name}}
			</view>
			<view class="class-room-img-text">
				<text v-for="v,i in roomDetails.features" :key="i">{{v.title}}</text>
			</view>
			<view class="class-room-img-time">
				<view class="" @click='show=true'>
					<image src="/static/images/wifi.png" mode=""></image>
					<text>一键Wifi</text>
				</view>
				<view class="" @click="isShow=true">
					<image src="../../static/images/sound.png" mode=""></image>
					<text>蓝牙音响</text>
				</view>
			</view>
		</view>
		<view class="class-room-select-time">
			<view class="class-room-title">
				<view class="class-room-title-xt"></view>
				<text>选择预约时间</text>
			</view>
			<view class="select-date-head">
				<scroll-view class="scroll_container " scroll-x="true" :class="{'zindex-ng': is_wifi_connecting}"
					@touchmove.stop>
					<view class="timeItem" @click="switchDate(item,index)" v-for="(item, index) in timeHeadList"
						:key="index">
						<view class=""
							style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
							<view class="day-num" :class="{activeColor:currentDay===index}">{{item.num}}</view>
							<view class="week" :class="{selectDay:currentDay===index}">{{ item.text }}</view>
						</view>
					</view>
				</scroll-view>

			</view>
			<view class="dayContent">
				<view class="dayItem " :class="v.state==2?'bg-dis':v.state==1?'active-time':''" v-for="v,i in pillTime"
					:key="i" @click="choosepill(v,i)">
					<view class="timeTitle">
						<view>{{v.text}}</view>
						<view>{{v.price}}元</view>
					</view>
					<view class="time" v-if="v.start && v.end">
						<div class='item start'>
							<text v-for="(s,index) in v.start.split(':')">
								{{ s }}<text class="mh" v-if="index === 0">:</text>
							</text>
						</div>
						<view class="gang">-</view>
						<div class='item end'>
							<text v-for="(s,index) in v.end.split(':')">
								{{ s }}<text class="mh" v-if="index === 0">:</text>
							</text>
						</div>
						<!-- {{v.start}}-{{v.end}} -->
					</view>
				</view>
				<view class="line"></view>
			</view>
			<view class="class-room-calendar-content">
				<view class="class-room-calendar">
					<!-- 日历 -->
				</view>
				<view class="class-room-attention">
					<view class="class-room-attention-tit">
						<image src="../../static/images/tips.png" mode=""></image>
						<text>注意事项</text>
					</view>
					<view class="class-room-attention-text">
						<view class="">
							1. 预约开始前{{vuex_config.rent_refund}}小时可以在“我的订单”自助退订
						</view>
						<view class="">
							2. 最小预约时间为{{vuex_config.rent_at_least_min}}分钟
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="class-room-introduce">
			<view class="class-room-select-time">
				<view class="class-room-title">
					<view class="class-room-title-xt"></view>
					<text>教室介绍</text>
				</view>
				<rich-text class="class-room-title-con" :nodes='roomDetails.room_descriptioncontent'></rich-text>
			</view>
			<view class="class-room-close-an-account">
				<view class="class-room-close-an-account-con">
					<view class="amount">共计：{{price}}元</view>
					<button class="class-room-close-btn" @click="goPayment()">去结算</button>
				</view>
			</view>
		</view>
		<!-- wifi弹框 -->
		<u-modal :closeOnClickOverlay="true" @cancel="copyWord(roomDetails.wifi_pwd)" confirmColor="#606266"
			confirmText="一键连接" cancelText="复制密码" :show="show" ref="uModal" :showCancelButton="true" @close="show=!show"
			@confirm="connectWifi">
			<view class="modal-content">
				<view class="pop-up-user">
					wifi帐号：{{roomDetails.wifi_name}}
				</view>
				<view class="pop-up-word">
					wifi密码：{{roomDetails.wifi_pwd}}
				</view>
			</view>
		</u-modal>
		<!-- 蓝牙弹框 -->
		<u-modal title="蓝牙音响" :closeOnClickOverlay="true" @confirm="closeBluetoothAudio" confirmColor="#606266"
			confirmText="确定" :show="isShow" ref="uModal" @close="isShow=!isShow">
			<view class="modal-content">
				<view class="pop-up-user">
					蓝牙账号：{{roomDetails.bluetooth_audio_name}}
				</view>
			</view>
		</u-modal>
		<popUp v-if="loginShow" :show="loginShow" @close="close" @registeredSuccess="registeredSuccess" />
	</view>
</template>
<script>
	import {
		get_room_detail_api,
		get_stores_Appointment_time_api,
		user_login_api,
		delete_reservation_api
	} from '@/common/api.js'
	import popUp from "@/components/popUp/index.vue";
	import moment from 'moment'
	export default {
		data() {
			return {
				show: false,
				isShow: false,
				word: "XXXXXX",
				// 当前选择的是哪一天
				currentDay: 0,
				timeHeadList: [],
				// 房间信息
				roomDetails: {},
				roomid: '',
				pillTime: [],
				price: 0,
				selectdate: moment(new Date()).format('YYYY-MM-DD'),
				loginShow: false,
				is_wifi_connecting: false,
			};
		},
		components: {
			popUp,
		},
		onLoad({
			id
		}) {
			this.roomid = id
			this.getRoom(id)
			this.getRoomTime()
			this.getTimeList()
		},
		onShow() {
			if (this.vuex_reserve_info.reserve_id) {
				console.log(this.vuex_reserve_info.reserve_id);
				let reserve_id = this.vuex_reserve_info.reserve_id
				delete_reservation_api({
					id: reserve_id
				}).then((res) => {

				})
				this.$u.vuex('vuex_reserve_info', {}) // 删除后置空, 不等待网路返回
			}
		},
		onShareAppMessage(res) {
		
		},
		methods: {
			registeredSuccess() {
				this.goPayment()
			},
			getRoom(id) {
				get_room_detail_api({
					id
				}).then(res => {
					this.roomDetails = res.data
				})
			},
			getTimeList() {
				for (let i = 0; i < this.vuex_config.rent_reserve_advance_day; i++) {
					this.timeHeadList[i] = {
						num: this.setHeadDate(i),
						text: i == 0 ? '今' : i == 1 ? '明' : this.setHeadDate(i, "week"),
						timer: 0,
						date: moment().add(i, 'days').format('YYYY-MM-DD')
					}
				}
				console.log(this.timeHeadList);
			},
			choosepill(v, i) {
				if (v.state == 2) return
				this.pillTime[i].state = v.state ? 0 : 1
				if (this.pillTime.length) {
					this.price = this.pillTime.filter((e) => e.state == 1).reduce((a, b) => parseInt(a) + parseInt(
						b.price), 0)
				} else {
					this.price = 0
				}
			},


			getRoomTime(date = moment().format('YYYY-MM-DD'), index = 0) {
				get_stores_Appointment_time_api({
					roomid: this.roomid,
					date
				}).then(res => {
					this.pillTime = []
					if (!index) {
						this.pillTime = this.filterTime(res.data)
					} else {
						this.pillTime = res.data
					}
					this.pillTime = this.pillTime.map((e, i) => {
						return {
							...e,
							text: this.handleTimeText(e.start),
							index: i
						}
					})
				})
			},
			switchDate({
				date
			}, index) {
				console.log(date);
				if (this.idx == index) return
				this.currentDay = index
				this.selectdate = date
				this.getRoomTime(date, index)
				this.price = 0
			},
			filterTime(arr) {
				const now = moment();
				const filteredData = arr.filter(item => {
					const startTime = moment(item.start, 'HH:mm');
					const endTime = moment(item.end, 'HH:mm');
					return now.isBetween(startTime, endTime) || now.isBefore(endTime);
				});
				return filteredData
			},
			handleTimeText(time) {
				const momentObj = moment(time, 'HH:mm');
				const hour = momentObj.hour();
				let timePeriod;
				if (hour >= 5 && hour < 12) {
					timePeriod = '早上';
				} else if (hour >= 12 && hour < 18) {
					timePeriod = '下午';
				} else if (hour >=0 && hour < 6) {
					timePeriod = '凌晨';
				} else {
					timePeriod = '晚上';
				}


				return timePeriod
			},
			closeBluetoothAudio() {
				this.isShow = false;
			},
			// 连wifi
			connectWifi() {
				this.is_wifi_connecting = true
				this.show = false // modal 关闭
				wx.startWifi({
					success: (e) => {
						wx.connectWifi({
							SSID: this.roomDetails.wifi_name, // 替换为您要连接的WiFi的SSID
							password: this.roomDetails.wifi_pwd, // 替换为您要连接的WiFi的密码
							success: (res) => {
								console.log('连接WiFi成功', res);
								// 连接成功后的操作，可以在这里执行其他逻辑
								this.$u.toast('连接WiFi成功')
								this.is_wifi_connecting = false
							},
							fail: (err) => {
								console.log('连接WiFi失败', err);

								this.$u.toast(err.errMsg)
								this.is_wifi_connecting = false
							}
						});
					},
					fail: (err) => {
						console.log('启动WiFi失败', err);
					},
					complete: () => {

					}
				});
			},
			//  想获取未来几天的时间就传入几，返回周几
			setHeadDate(feature, type) {
				const oneDayTime = 60 * 60 * 24 * 1000;
				const date = new Date();
				date.setTime(date.getTime() + (oneDayTime * feature));
				if (type === "week") {
					const dayArr = ["日", "一", "二", "三", "四", "五", "六"]
					return dayArr[date.getDay()];
				} else {
					return date.getDate();
				}
			},
			goPayment() {
				if (!this.vuex_has_login) return this.isShowLogin()
				if (this.isLess(this.pillTime.filter(e => e.state == 1), this.vuex_config.rent_at_least_min)) {
					return this.$u.toast('请选择时间，最少' + this.vuex_config.rent_at_least_min + '分钟起订哦~', 2000);
				}
				let arr = []
				arr = this.pillTime.filter(e => e.state == 1).map(a => a.index)
				arr.sort((a, b) => a -
					b);

				for (let i = 0; i < arr.length - 1; i++) {
					if (arr[i] + 1 !== arr[i + 1]) {
						return this.$u.toast('请选择连续时间段', 2000);
					}
				}
				let arrTime = []
				arrTime = this.pillTime.filter(e => e.state == 1)
				this.$u.vuex('vuex_reserve_info', {
					room_id: this.roomid,
					price: this.price,
					start_time: this.selectdate + ' ' + arrTime[0].start,
					end_time: this.selectdate + ' ' + arrTime[arrTime.length - 1].end,
				})
				if (!this.vuex_has_login) {
					// await this.wx_login()
					setTimeout(() => {
						this.$u.route({
							url: `/pages/paymentPage/paymentPage`
						});
					}, 100)
				} else {
					this.$u.route({
						url: `/pages/paymentPage/paymentPage`
					});
				}
			},
			isLess(arr, time) {
				let totalDuration = 0
				for (let timeStr of arr) {
					const [start, end] = [timeStr.start, timeStr.end].map(t => moment(`${this.selectdate} ${t.trim()}`));
					const duration = moment.duration(end.diff(start)).asMinutes();
					totalDuration += duration;
				}
				if (arr.find(e => e.end.includes(59))) {
					return totalDuration < time - 1
				}
				return totalDuration < time

			},
			// 复制密码
			copyWord(word) {
				uni.setClipboardData({
					data: word,
				})
				uni.showToast({
					title: '复制成功',
					icon: 'success'
				})
				this.show = false
			},
			close() {
				this.loginShow = false

			},
			// 先尝试直接登录
			isShowLogin() {
				uni.login({
					provider: 'weixin',
					success: (res) => {
						user_login_api({
							code: res.code
						}).then((res) => {
							console.log(res);
							if (res.code == 1) {
								this.vuex_login(res)
								this.goPayment()
							} else {
								this.loginShow = true
							}
						})
					},
					fail: (err) => {
						console.log(err);
					},
				})

			},
		}
	}
</script>

<style lang="scss">
	.bg-dis {
		background-color: rgba(192, 196, 204, 0.3) !important;
	}

	.zindex-ng {
		z-index: -1;
	}

	.class-room {

		.class-room-img {
			image {
				width: 750rpx;
				height: 422rpx;
				display: block;
			}
		}

		.class-room-shop {

			.class-room-shop-tit {
				box-sizing: border-box;
				padding: 32rpx 24rpx 36rpx 24rpx;
				font-size: 36rpx;
				color: #303133;
			}

			.class-room-img-text {
				box-sizing: border-box;
				padding: 0 24rpx;
				display: flex;
				flex-wrap: wrap;

				text {
					height: 58rpx;
					max-width: max-content;
					padding: 0 12rpx;
					line-height: 58rpx;
					background-color: #40C6A1;
					color: #F3F4F6;
					margin: 0 24rpx 24rpx 0;
					font-size: 28rpx;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
				}
			}

			.class-room-img-time {
				margin-top: 8rpx;
				box-sizing: border-box;
				padding: 0 24rpx;
				display: flex;
				justify-content: space-between;
				padding-bottom: 32rpx;
				border-bottom: 8rpx solid #F3F4F6;

				view {
					display: flex;
					align-items: center;
					width: 326rpx;
					height: 128rpx;
					background: #F3F4F6;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					border: 4rpx solid #40C6A1;

					image {
						width: 64rpx;
						height: 64rpx;
						margin-right: 30rpx;
						margin-left: 50rpx;
					}

					text {
						color: #000000;
						font-size: 36rpx;
						font-weight: 500;

					}
				}
			}

		}

		.class-room-select-time {
			box-sizing: border-box;
			padding: 24rpx;

			.select-date-head {
				height: 134rpx;
				background-color: #FAFBFB;
				display: flex;
				justify-content: space-around;
				align-items: center;


				.timeItem {
					width: 100rpx;
					// height: 96rpx;
					display: inline-block;
					text-align: center;

					.scroll-content {
						margin-top: 20rpx;
						margin-bottom: 20rpx;
					}

					.week {
						text-align: center;
						font-size: 32rpx;
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						color: #606266;
					}

					.selectDay {
						background-color: #40C6A1;
						color: white;
					}

					.day-num {
						text-align: center;
						margin-bottom: 6rpx;
					}
				}

				.activeColor {
					color: #40C6A1;
				}

			}

			.dayContent {
				// width: 100%;
				background-color: #F3F4F6;
				display: flex;
				// grid-template-columns: auto auto auto;
				// justify-content: space-evenly;
				flex-wrap: wrap;

				.line {
					height: 2rpx;
					background-color: #E8E8E9;
					width: 654rpx;
					margin-top: 24rpx;
					margin-left: 24rpx;
				}

				.dayItem {
					width: 200rpx;
					height: 120rpx;
					// margin: 0 auto;
					margin-top: 24rpx;
					margin-left: 28rpx;
					// margin: 24rpx auto 0rpx auto;
					background-color: white;
					box-sizing: border-box;
					padding: 15rpx 12rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					box-sizing: border-box;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 6rpx solid transparent;

					.timeTitle {
						font-size: 28rpx;
						display: flex;
						justify-content: space-between;
						color: #606266;
					}

					.time {
						font-size: 24rpx;
						color: #606266;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.item{
							flex: 1;
							display: flex;
							align-items: center;
							justify-content: space-between;
							.mh{
								padding-left: 6rpx;
							}
						}
						.gang{
							padding: 0rpx 4rpx;
						}
					}
				}

				.selectTime {
					border: 6rpx solid #40C6A1;
					background-color: rgb(225, 239, 237);
				}

				.disableSelect {
					background-color: rgb(228, 230, 233);
				}
			}


			.class-room-title {
				display: flex;
				align-items: center;
				margin-bottom: 28rpx;

				.class-room-title-xt {
					width: 12rpx;
					height: 32rpx;
					margin-right: 16rpx;
					background: #40C6A1;
				}

				text {
					font-size: 36rpx;
					color: #303133 100%;
					font-weight: 500;
				}

			}

			.class-room-title-con {
				color: #606266;
				line-height: 50rpx;
				font-size: 28rpx;
			}

			.class-room-calendar-content {
				background-color: #F3F4F6;
				box-sizing: border-box;
				padding: 0 16rpx;
				overflow: hidden;

				.class-room-calendar {
					// 日历样式
				}

				.class-room-attention {
					margin-top: 24rpx;

					.class-room-attention-tit {
						display: flex;
						margin-bottom: 16rpx;

						image {
							width: 36rpx;
							height: 36rpx;
							margin-right: 16rpx;
						}

						text {
							color: #606266;
							font-size: 28rpx;
						}
					}

					.class-room-attention-text {
						padding-bottom: 24rpx;

						view {
							font-weight: 300;
							color: #909399;
							font-size: 24rpx;
							margin-bottom: 12rpx;
						}
					}
				}
			}

		}

		.class-room-introduce {
			padding-bottom: 100rpx;

			.class-room-introduce-text {
				// padding-bottom: 100rpx;
				color: #606266;
				line-height: 50rpx;
				font-size: 28rpx;

			}
		}

		.class-room-close-an-account {

			width: 750rpx;
			height: 108rpx;
			background: #40C6A1;
			box-sizing: border-box;
			padding: 0 24rpx;
			position: fixed;
			bottom: 0;

			.class-room-close-an-account-con {
				display: flex;

				.amount {
					font-size: 36rpx;
					color: #fff;
					line-height: 108rpx;
					// max-width: 200px;
					min-width: 200rpx;
				}

				.class-room-close-btn {
					margin-top: 18rpx;
					width: 204rpx;
					height: 72rpx;
					background: #F3F4F6;
					border-radius: 36rpx 36rpx 36rpx 36rpx;
					opacity: 1;
					text-align: center;
					line-height: 72rpx;
					color: #000000;
					font-weight: 500;
					margin-left: 296rpx;
				}
			}
		}

	}

	.pop-up {
		width: 628rpx;
		height: 370rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		border: 5rpx;
		text-align: center;

		.pop-up-tit {
			margin-top: 50rpx;
			margin-bottom: 22rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #303133;

		}



		.pop-up-bottom {
			display: flex;
			justify-content: space-evenly;
			margin-top: 50rpx;

			border-top: 2rpx solid #F3F4F6;

			text {
				height: 100rpx;
				line-height: 100rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #303133;
			}

			.pop-up-bottom-one {
				padding-right: 86rpx;
				border-right: 2rpx solid #F3F4F6;
			}
		}
	}

	.pop-up-ly {
		width: 628rpx;
		height: 314rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		border: 5rpx;
		text-align: center;

		.pop-up-tit {
			margin-top: 44rpx;
			margin-bottom: 22rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #303133;

		}

		.pop-up-user {
			font-size: 28rpx;
			font-weight: 400;
			color: #606266;
			margin-bottom: 20rpx;
		}



		.pop-up-bottom {
			display: flex;
			justify-content: space-evenly;
			margin-top: 50rpx;

			border-top: 2rpx solid #F3F4F6;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #303133;


		}
	}

	.pop-up-user {
		width: 100%;
		// font-size: 28rpx;
		// font-weight: 400;
		// color: #606266;
		// margin-bottom: 20rpx;
	}

	.pop-up-word {
		margin-top: 20rpx;
		width: 100%;
		// font-size: 28rpx;
		// font-weight: 400;
		// color: #606266;
	}

	.active-time {
		background: rgba(64, 198, 161, 0.1) !important;
		border: 6rpx solid #40C6A1 !important;
	}

	.scroll_container {
		width: 100%;
		white-space: nowrap;

		.k_item {
			width: 100rpx;
			// height: 96rpx;
			line-height: 36rpx;
			display: inline-block;

			.scroll-content {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>
